Feat: text classes

components/composition/Hidden/Hidden.stories.ts

@@ -57,7 +57,7 @@ export const Hidden: StoryObj = {
   `,
 };
 
-Spacing.args = {
+Hidden.args = {
   smallMobile: false,
   mobile: false,
   largeMobile: false,

components/content/Text/Text.css

@@ -0,0 +1,157 @@
+/* Font */
+
+.diamond-text-font-body {
+  font-family: var(--diamond-font-family);
+  font-size: var(--diamond-font-size-base);
+  font-weight: var(--diamond-font-weight-base);
+  line-height: var(--diamond-font-line-height);
+  text-wrap: pretty;
+}
+
+.diamond-text-font-heading {
+  font-family: var(--diamond-font-family-heading);
+  font-weight: var(--diamond-font-weight-bold);
+  line-height: var(--diamond-font-line-height-heading);
+  text-wrap: balance;
+}
+
+/* Size */
+
+.diamond-text-size-default {
+  font-size: var(--diamond-font-size-default);
+}
+
+.diamond-text-size-xs {
+  font-size: var(--diamond-font-size-xs);
+}
+
+.diamond-text-size-sm {
+  font-size: var(--diamond-font-size-sm);
+}
+
+.diamond-text-size-base {
+  font-size: var(--diamond-font-size-base);
+}
+
+.diamond-text-size-md {
+  font-size: var(--diamond-font-size-md);
+}
+
+.diamond-text-size-lg {
+  font-size: var(--diamond-font-size-lg);
+}
+
+.diamond-text-size-xl {
+  font-size: var(--diamond-font-size-xl);
+}
+
+.diamond-text-size-xxl {
+  font-size: var(--diamond-font-size-xxl);
+}
+
+.diamond-text-size-xxxl {
+  font-size: var(--diamond-font-size-xxxl);
+}
+
+.diamond-text-size-h1 {
+  font-size: var(--diamond-font-size-h1);
+}
+
+.diamond-text-size-h2 {
+  font-size: var(--diamond-font-size-h2);
+}
+
+.diamond-text-size-h3 {
+  font-size: var(--diamond-font-size-h3);
+}
+
+.diamond-text-size-h4 {
+  font-size: var(--diamond-font-size-h4);
+}
+
+/* Weight */
+
+.diamond-text-weight-light {
+  font-weight: var(--diamond-font-weight-light);
+}
+
+.diamond-text-weight-medium {
+  font-weight: var(--diamond-font-weight-medium);
+}
+
+.diamond-text-weight-bold {
+  font-weight: var(--diamond-font-weight-bold);
+}
+
+.diamond-text-weight-black {
+  font-weight: var(--diamond-font-weight-black);
+}
+
+.diamond-text-weight-body {
+  font-weight: var(--diamond-font-weight-base);
+}
+
+.diamond-text-weight-heading {
+  font-weight: var(--diamond-font-weight-bold);
+}
+
+/* Alignment */
+
+.diamond-text-align-left {
+  text-align: left;
+}
+
+.diamond-text-align-center {
+  text-align: center;
+}
+
+.diamond-text-align-right {
+  text-align: right;
+}
+
+/* Wrap */
+
+.diamond-text-wrap-balance {
+  text-wrap: balance;
+}
+
+.diamond-text-wrap-pretty {
+  text-wrap: pretty;
+}
+
+/* Truncate */
+
+.diamond-text-truncate,
+.diamond-text-line-limit-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Line limit */
+.diamond-text-line-limit-2,
+.diamond-text-line-limit-3,
+.diamond-text-line-limit-4 {
+  -webkit-box-orient: vertical;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.diamond-text-line-limit-2 {
+  -webkit-line-clamp: 2;
+}
+
+.diamond-text-line-limit-3 {
+  -webkit-line-clamp: 3;
+}
+
+.diamond-text-line-limit-4 {
+  -webkit-line-clamp: 4;
+}
+
+/* Decoration */
+
+.diamond-text-decoration-none {
+  text-decoration: none;
+}

components/content/Text/Text.stories.ts

@@ -0,0 +1,142 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const description =
+  'Diamond text is a set of utility classes that can be added to any component or element to alter the text style.';
+
+export default {
+  component: 'diamond-text',
+  parameters: {
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
+  argTypes: {
+    font: {
+      control: {
+        type: 'select',
+      },
+      options: ['body', 'heading'],
+      description:
+        'Sets a combination of CSS properties to match the selected font style.',
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'base',
+        'default',
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'xxl',
+        'xxxl',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+      ],
+      description: 'Sets the font-size property.',
+    },
+    weight: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'medium', 'bold', 'black', 'body', 'heading'],
+      description: 'Sets the font-weight property.',
+    },
+    align: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['left', 'center', 'right'],
+      description: 'Sets the text-align property.',
+    },
+    wrap: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['balance', 'pretty'],
+      description: 'Sets the text-wrap property.',
+    },
+    truncate: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        "Truncates the text to a single line with an ellipsis if it's too long.",
+    },
+    lineLimit: {
+      control: {
+        type: 'select',
+      },
+      options: ['1', '2', '3', '4'],
+      description:
+        "Limits the text to the specified number of lines and adds an ellipsis if it's too long. 'diamond-text-line-limit-1' is an alias for 'diamond-text-truncate'.",
+    },
+    decoration: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['none'],
+      description:
+        'Sets the text-decoration property. Currently only supports the value "none", which can be used to remove the default text underline on cards wrapped in <a> tags.',
+    },
+  },
+};
+
+export const Text: StoryObj = {
+  render: ({
+    font,
+    size,
+    weight,
+    align,
+    wrap,
+    lineLimit,
+    truncate,
+    decoration,
+  }) => {
+    const classes = [
+      `diamond-text-font-${font}`,
+      `diamond-text-size-${size}`,
+      `diamond-text-weight-${weight}`,
+      `diamond-text-align-${align}`,
+      `diamond-text-wrap-${wrap}`,
+      `diamond-text-line-limit-${lineLimit}`,
+      `diamond-text-decoration-${decoration}`,
+    ];
+
+    if (truncate) {
+      classes.push('diamond-text-truncate');
+    }
+
+    const classString = classes
+      .filter((className) => !className.endsWith('undefined'))
+      .join(' ');
+
+    return html`
+      <p class="${classString}">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua.
+      </p>
+    `;
+  },
+};
+
+Text.args = {
+  font: undefined,
+  size: undefined,
+  weight: undefined,
+  align: undefined,
+  wrap: undefined,
+  truncate: false,
+  lineLimit: undefined,
+  decoration: undefined,
+};

styles/base/typography.css

@@ -3,6 +3,7 @@ body {
   font-size: var(--diamond-font-size-base);
   -webkit-font-smoothing: antialiased;
   line-height: var(--diamond-font-line-height);
+  text-wrap: pretty;
 }
 
 h1,
@@ -11,14 +12,14 @@ h3,
 h4 {
   color: var(--diamond-theme-heading-color);
   font-weight: var(--diamond-font-weight-bold);
-  line-height: var(--diamond-font-line-height-sm);
+  line-height: var(--diamond-font-line-height-heading);
   margin-bottom: var(--diamond-spacing-sm);
   margin-top: 0;
+  text-wrap: balance;
 }
 
 h1 {
   font-size: var(--diamond-font-size-h1);
-  line-height: var(--diamond-font-line-height-sm);
 }
 
 h2 {

styles/tokens/font.css

@@ -1,9 +1,11 @@
 :root {
   --diamond-font-family: -apple-system, system-ui, blinkmacsystemfont, roboto,
     helvetica, arial, sans-serif;
+  --diamond-font-family-heading: var(--diamond-font-family);
 
   --diamond-font-line-height: 1.5;
   --diamond-font-line-height-sm: 1.25;
+  --diamond-font-line-height-heading: var(--diamond-font-line-height-sm);
 
   --diamond-font-size-default: 1rem;
   --diamond-font-size-xs: 0.75em;