Merge pull request #24 from etchteam/feature/etch-378-label

Label css

components/control/Label/Label.css

@@ -0,0 +1,9 @@
+label,
+legend {
+  align-items: center;
+  color: var(--diamond-label-color);
+  display: flex;
+  font-size: var(--diamond-label-font-size);
+  font-weight: var(--diamond-label-font-weight);
+  min-height: var(--diamond-label-height);
+}

components/control/Label/Label.stories.ts

@@ -0,0 +1,55 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../Input/Input';
+
+const description = `
+Diamond provides some customisable base styles applied to the \`<label>\` and \`<legend>\` elements.
+`;
+
+export default {
+  component: 'label',
+  parameters: {
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
+};
+
+export const Label: StoryObj = {
+  render: () => html`
+    <label for="input-with-label">Label</label>
+    <diamond-input>
+      <input id="input-with-label" />
+    </diamond-input>
+  `,
+};
+
+export const Legend: StoryObj = {
+  render: () => html`
+    <fieldset>
+      <legend>Legend</legend>
+      <diamond-input>
+        <input />
+      </diamond-input>
+    </fieldset>
+  `,
+};
+
+export const ScreenReaderOnly: StoryObj = {
+  render: () => html`
+    <p>The invisible label content below is read by screen readers</p>
+    <label for="input-with-label" class="diamond-sr-only">Label</label>
+  `,
+};
+
+ScreenReaderOnly.parameters = {
+  docs: {
+    description: {
+      story:
+        'Occasionally, a label is only helpful when a screen reader is in use. In this case, the `.diamond-sr-only` class can be used to visually hide the label.',
+    },
+  },
+};

styles/base.css

@@ -2,3 +2,4 @@
 @import url('./base/scaffolding.css');
 @import url('./base/typography.css');
 @import url('./base/interactive.css');
+@import url('./base/screen-reader.css');

styles/base/screen-reader.css

@@ -0,0 +1,10 @@
+.diamond-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

styles/tokens.css

@@ -3,9 +3,10 @@
 @import url('./tokens/color.css');
 @import url('./tokens/font.css');
 @import url('./tokens/input.css');
+@import url('./tokens/label.css');
 @import url('./tokens/radius.css');
-@import url('./tokens/theme.css');
 @import url('./tokens/shadow.css');
 @import url('./tokens/spacing.css');
+@import url('./tokens/theme.css');
 @import url('./tokens/transition.css');
 @import url('./tokens/wrap.css');

styles/tokens/label.css

@@ -0,0 +1,6 @@
+:root {
+  --diamond-label-color: var(--diamond-theme-color);
+  --diamond-label-font-weight: var(--diamond-font-weight-base);
+  --diamond-label-font-size: var(--diamond-font-size-base);
+  --diamond-label-height: var(--diamond-spacing-thumb);
+}