@helsenorge/designsystem-react 13.0.0-workspaces-beta.1 → 13.0.0-workspaces-beta.3

package/scss/typography.module.scss

@@ -0,0 +1,182 @@
+@use 'sass:map';
+@use './spacers' as spacers;
+@use './palette' as palette;
+@use './font-mixins' as fonts;
+@use './font-settings' as font-settings;
+@use './breakpoints' as breakpoints;
+@use './fonts' as *;
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemtypography from './scss/typography.scss'
+<div className={designsystemtypography.title1}></div>
+*/
+
+.title-feature {
+  @include fonts.title-feature;
+}
+
+.focused-content {
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
+}
+
+.title1 {
+  @include fonts.title1;
+}
+
+.title2 {
+  @include fonts.title2;
+}
+
+.title3 {
+  @include fonts.title3;
+}
+
+.title4 {
+  @include fonts.title4;
+}
+
+.title5 {
+  @include fonts.title5;
+}
+
+.title6 {
+  @include fonts.title6;
+}
+
+.body {
+  @include fonts.body;
+}
+
+.preamble {
+  @include fonts.preamble;
+}
+
+.legend {
+  @include fonts.legend;
+}
+
+.label {
+  @include fonts.label;
+}
+
+.label-subdued {
+  @include fonts.label-subdued;
+}
+
+.sublabel {
+  @include fonts.sublabel;
+}
+
+.sublabel-subdued {
+  @include fonts.sublabel-subdued;
+}
+
+.compact-data {
+  @include fonts.compact-data;
+}
+
+.table-cell {
+  @include fonts.table-cell;
+}
+
+.strong {
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
+  }
+}
+
+.form {
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: font-settings.$font-size-md;
+  }
+}
+
+.status-timestamp {
+  @include fonts.status-timestamp;
+}
+
+.image-caption {
+  @include fonts.image-caption;
+}
+
+.image-credit {
+  @include fonts.image-credit;
+}
+
+.input-text {
+  @include fonts.input-text;
+}
+
+.input-text-large {
+  @include fonts.input-text-large;
+}
+
+.text-list {
+  @include fonts.text-list;
+}
+
+.definition-list-type {
+  @include fonts.definition-list-type;
+}
+
+.definition-list-data {
+  @include fonts.definition-list-data;
+}
+
+.help-text {
+  @include fonts.help-text;
+}
+
+.help-trigger-text {
+  @include fonts.help-trigger-text;
+}
+
+.anchorlink-wrapper {
+  a {
+    display: inline;
+    box-decoration-break: clone;
+    overflow-wrap: break-word;
+    word-break: normal;
+    text-align: left;
+    color: palette.$blueberry600;
+    border: 0.15rem solid transparent;
+    text-decoration: underline;
+    text-underline-offset: 0.16rem;
+    text-decoration-color: palette.$blueberry400;
+    text-decoration-thickness: 0.0625rem;
+    padding: 0.1rem;
+
+    &:hover {
+      cursor: pointer;
+      color: palette.$blueberry700;
+      background-color: palette.$blueberry50;
+      text-decoration-color: palette.$blueberry600;
+    }
+
+    &:focus {
+      outline: none;
+      border: 0.15rem solid palette.$black;
+    }
+
+    &[target='_blank'] {
+      /* external styling legge til icon */
+      &::after {
+        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
+        display: inline-block;
+        vertical-align: bottom;
+        margin-right: -0.4rem;
+        margin-top: -2rem;
+        margin-bottom: -0.8rem;
+      }
+    }
+  }
+}

package/scss/typography.module.scss.d.ts

@@ -0,0 +1,38 @@
+export type Styles = {
+  'anchorlink-wrapper': string;
+  body: string;
+  'compact-data': string;
+  'definition-list-data': string;
+  'definition-list-type': string;
+  'focused-content': string;
+  form: string;
+  'help-text': string;
+  'help-trigger-text': string;
+  'image-caption': string;
+  'image-credit': string;
+  'input-text': string;
+  'input-text-large': string;
+  label: string;
+  'label-subdued': string;
+  legend: string;
+  preamble: string;
+  'status-timestamp': string;
+  strong: string;
+  sublabel: string;
+  'sublabel-subdued': string;
+  'table-cell': string;
+  'text-list': string;
+  'title-feature': string;
+  title1: string;
+  title2: string;
+  title3: string;
+  title4: string;
+  title5: string;
+  title6: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/scss/typography.stories.tsx

@@ -0,0 +1,203 @@
+import { StoryObj, Meta } from '@storybook/react-vite';
+
+import LabelComponent from '../components/Label';
+import Title from '../components/Title';
+
+import designsystemtypography from './typography.module.scss';
+
+const meta = {
+  title: '@helsenorge/designsystem-react/scss/Typography',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Typografi-klasser tilgjengeliggjort til bruk utenfor React-komponentene.',
+      },
+    },
+  },
+  args: {
+    tekst: 'Tekst',
+  },
+} as Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TitleFeature: Story = {
+  render: args => <div className={designsystemtypography['title-feature']}>{args.tekst}</div>,
+};
+
+export const Title1: Story = {
+  render: args => <div className={designsystemtypography.title1}>{args.tekst}</div>,
+};
+
+export const Title2: Story = {
+  render: args => <div className={designsystemtypography.title2}>{args.tekst}</div>,
+};
+
+export const Title3: Story = {
+  render: args => <div className={designsystemtypography.title3}>{args.tekst}</div>,
+};
+
+export const Title4: Story = {
+  render: args => <div className={designsystemtypography.title4}>{args.tekst}</div>,
+};
+
+export const Title5: Story = {
+  render: args => <div className={designsystemtypography.title5}>{args.tekst}</div>,
+};
+
+export const Title6: Story = {
+  render: args => <div className={designsystemtypography.title6}>{args.tekst}</div>,
+};
+
+export const Preamble: Story = {
+  render: args => <div className={designsystemtypography.preamble}>{args.tekst}</div>,
+};
+
+export const Legend: Story = {
+  render: args => <div className={designsystemtypography.legend}>{args.tekst}</div>,
+};
+
+export const Label: Story = {
+  render: args => <div className={designsystemtypography.label}>{args.tekst}</div>,
+};
+
+export const LabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['label-subdued']}>{args.tekst}</div>,
+};
+
+export const Sublabel: Story = {
+  render: args => <div className={designsystemtypography.sublabel}>{args.tekst}</div>,
+};
+
+export const SublabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['sublabel-subdued']}>{args.tekst}</div>,
+};
+
+export const CompactData: Story = {
+  render: args => <div className={designsystemtypography['compact-data']}>{args.tekst}</div>,
+};
+
+export const TableCell: Story = {
+  render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
+};
+
+export const Strong: Story = {
+  render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
+};
+
+export const ImageCaption: Story = {
+  render: args => <div className={designsystemtypography['image-caption']}>{args.tekst}</div>,
+};
+
+export const ImageCredit: Story = {
+  render: args => <div className={designsystemtypography['image-credit']}>{args.tekst}</div>,
+};
+
+export const StatusTimestamp: Story = {
+  render: args => <div className={designsystemtypography['status-timestamp']}>{args.tekst}</div>,
+};
+
+export const InputText: Story = {
+  render: args => <div className={designsystemtypography['input-text']}>{args.tekst}</div>,
+};
+
+export const InputTextLarge: Story = {
+  render: args => <div className={designsystemtypography['input-text-large']}>{args.tekst}</div>,
+};
+
+export const TextList: Story = {
+  render: args => <div className={designsystemtypography['text-list']}>{args.tekst}</div>,
+};
+
+export const DefinitionListType: Story = {
+  render: args => <div className={designsystemtypography['definition-list-type']}>{args.tekst}</div>,
+};
+
+export const DefinitionListData: Story = {
+  render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
+};
+
+export const HelpText: Story = {
+  render: args => <div className={designsystemtypography['help-text']}>{args.tekst}</div>,
+};
+
+export const HelpTriggerText: Story = {
+  render: args => <div className={designsystemtypography['help-trigger-text']}>{args.tekst}</div>,
+};
+
+export const AnchorlinkWrapper: Story = {
+  render: args => (
+    <div className={designsystemtypography['anchorlink-wrapper']}>
+      <a href="www.helsenorge.no">{args.tekst}</a>
+      <a href="www.helsenorge.no" target="_blank">
+        {args.tekst}
+      </a>
+    </div>
+  ),
+};
+
+export const ClassExamplesWithComponents: Story = {
+  render: () => {
+    const padding = '10px';
+    return (
+      <>
+        <table style={{}}>
+          <tr>
+            <th style={{ padding }}>{'Class Example'}</th>
+            <th style={{ padding }}>{'Component Example'}</th>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography.title2}>{'Title2'}</div>
+            </td>
+            <td style={{ padding }}>
+              <Title appearance="title2">{'Title2'}</Title>
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography.title3}>{'Title3'}</div>
+            </td>
+            <td style={{ padding }}>
+              <Title appearance="title3">{'Title3'}</Title>
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography.title4}>{'Title4'}</div>
+            </td>
+            <td style={{ padding }}>
+              <Title appearance="title4">{'Title4'}</Title>
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography.title5}>{'Title5'}</div>
+            </td>
+            <td style={{ padding }}>
+              <Title appearance="title5">{'Title5'}</Title>
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography['title-feature']}>{'Title Feature'}</div>
+            </td>
+            <td style={{ padding }}>
+              <Title appearance="titleFeature">{'Title Feature'}</Title>
+            </td>
+          </tr>
+          <tr>
+            <td style={{ padding }}>
+              <div className={designsystemtypography.label}>{'Label'}</div>
+            </td>
+            <td style={{ padding }}>
+              <LabelComponent labelTexts={[{ text: 'Label' }]} />
+            </td>
+          </tr>
+        </table>
+      </>
+    );
+  },
+};