Container, Card, IMG, Text and Grid updates

apps/core-lib-dev/project.json

@@ -7,7 +7,9 @@
   "targets": {
     "build": {
       "executor": "@nx/webpack:webpack",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
         "outputPath": "dist/apps/core-lib-dev",
@@ -16,12 +18,13 @@
         "tsConfig": "apps/core-lib-dev/tsconfig.app.json",
         "webpackConfig": "apps/core-lib-dev/webpack.config.js",
         "assets": [
-          "apps/core-lib-dev/src/favicon.ico",
           "apps/core-lib-dev/src/assets"
         ],
         "index": "apps/core-lib-dev/src/index.html",
         "baseHref": "/",
-        "styles": ["apps/core-lib-dev/src/styles.scss"],
+        "styles": [
+          "apps/core-lib-dev/src/styles.scss"
+        ],
         "scripts": []
       },
       "configurations": {
@@ -43,7 +46,9 @@
     },
     "serve": {
       "executor": "@nx/webpack:dev-server",
-      "inputs": ["core"],
+      "inputs": [
+        "core"
+      ],
       "options": {
         "buildTarget": "core-lib-dev:build",
         "port": 4210,
@@ -60,10 +65,12 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/core-lib-dev/jest.config.ts"
       }
     }
   }
-}
+}

apps/core-lib-dev/src/app/app.element.ts

@@ -3,7 +3,7 @@ import { property, state } from 'lit/decorators.js'
 import { choose } from 'lit/directives/choose.js'
 
 import { html } from '@sebgroup/green-core/scoping'
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+// import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
 import { gdsInitLocalization } from '@sebgroup/green-core/localization'
 import '@sebgroup/green-core/components/icon/icons/flag.js'
 import '@sebgroup/green-core/components/segmented-control/index.js'
@@ -13,6 +13,7 @@ import './simple-values.element'
 import './complex-values.element'
 import './datepicker.element'
 import './calendar.element'
+import './card.element'
 
 const { setLocale, getLocale } = gdsInitLocalization()
 
@@ -34,11 +35,11 @@ export class AppElement extends LitElement {
   accessor lang = 'sv'
 
   @state()
-  accessor currentView = 'simple-values'
+  accessor currentView = 'card'
 
   connectedCallback() {
     super.connectedCallback()
-    registerTransitionalStyles()
+    // registerTransitionalStyles()
     this.setLang(getLocale())
   }
 
@@ -78,25 +79,36 @@ export class AppElement extends LitElement {
             >
             <gds-segment value="datepicker">Datepicker</gds-segment>
             <gds-segment value="calendar">Calendar</gds-segment>
+            <gds-segment value="card">Card</gds-segment>
           </gds-segmented-control>
-          <div class="card">
-            ${choose(
-              this.currentView,
-              [
-                ['simple-values', () => html`<simple-values></simple-values>`],
-                [
-                  'complex-values',
-                  () => html`<complex-values></complex-values>`,
-                ],
-                [
-                  'datepicker',
-                  () => html`<datepicker-example></datepicker-example>`,
-                ],
-                ['calendar', () => html`<calendar-example></calendar-example>`],
-              ],
-              () => html`No view selected`,
-            )}
-          </div>
+          ${this.currentView === 'card'
+            ? html`<card-example></card-example>`
+            : html`
+                <div class="card">
+                  ${choose(
+                    this.currentView,
+                    [
+                      [
+                        'simple-values',
+                        () => html`<simple-values></simple-values>`,
+                      ],
+                      [
+                        'complex-values',
+                        () => html`<complex-values></complex-values>`,
+                      ],
+                      [
+                        'datepicker',
+                        () => html`<datepicker-example></datepicker-example>`,
+                      ],
+                      [
+                        'calendar',
+                        () => html`<calendar-example></calendar-example>`,
+                      ],
+                    ],
+                    () => html`No view selected`,
+                  )}
+                </div>
+              `}
         </div>
       </gds-theme>
     `

apps/core-lib-dev/src/app/calendar.element.ts

@@ -1,8 +1,7 @@
 import { LitElement } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { html } from '@sebgroup/green-core/scoping'
-
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
+// import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
 
 @customElement('calendar-example')
 export class CalendarExample extends LitElement {
@@ -12,7 +11,7 @@ export class CalendarExample extends LitElement {
 
   connectedCallback() {
     super.connectedCallback()
-    registerTransitionalStyles()
+    // registerTransitionalStyles()
   }
 
   @state()

apps/core-lib-dev/src/app/card.element.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { html } from '@sebgroup/green-core/scoping'
+
+@customElement('card-example')
+export class CardExample extends LitElement {
+  protected createRenderRoot() {
+    return this
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <gds-container display="flex" padding="s{xs} m{l} l{2xl}">
+        <gds-card shadow="s" radius="xs" overflow="hidden">
+          <gds-grid columns="2" gap="xl">
+            <gds-container position="relative">
+              <gds-img
+                ratio="2/2.4"
+                src="./assets/cards.jpg"
+                alt="Cards"
+                fit="cover"
+                position="60%"
+              ></gds-img>
+              <gds-container
+                position="absolute"
+                filter="20px"
+                inset="auto 20px 20px 20px"
+                padding="s{xs} m{l} l{2xl}"
+                background="rgba(0, 0, 0, 0.1)"
+                radius="xs"
+                color="white-text"
+              >
+                <h2>Title</h2>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </p>
+              </gds-container>
+            </gds-container>
+            <gds-container>
+              <gds-card shadow="s" radius="xs">
+                <gds-container
+                  display="flex"
+                  direction="column"
+                  padding="s{xs} m{l} l{2xl}"
+                  align="stretch"
+                  justify="center"
+                  height="100%"
+                >
+                  <h1>Login</h1>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </p>
+                  <gds-container
+                    display="flex"
+                    direction="column"
+                    gap="s"
+                    align="stretch"
+                  >
+                    <input type="text" placeholder="Username" />
+                    <input type="password" placeholder="Password" />
+                  </gds-container>
+                  <gds-container
+                    display="flex"
+                    direction="row"
+                    gap="xl"
+                    align="center"
+                  >
+                    <gds-button>
+                      Register
+                      <gds-icon-growth slot="trail"></gds-icon-growth>
+                    </gds-button>
+                    <p>or</p>
+                    <gds-button rank="secondary">Login</gds-button>
+                  </gds-container>
+                </gds-container>
+              </gds-card>
+            </gds-container>
+          </gds-grid>
+        </gds-card>
+      </gds-container>
+    `
+  }
+}

apps/core-lib-dev/src/app/complex-values.element.ts

@@ -5,8 +5,6 @@ import {
   getScopedTagName,
 } from '@sebgroup/green-core'
 
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
-
 const html = htmlTemplateTagFactory((strs, ...values) =>
   strs.map((s, i) => s + values[i]).join(''),
 )
@@ -15,8 +13,6 @@ export class AppElement extends HTMLElement {
   public static observedAttributes = []
 
   connectedCallback() {
-    registerTransitionalStyles()
-
     this.innerHTML = html`
       <form id="my-form">
         <gds-dropdown id="dropdown" label="Select a value" style="width: 200px">

apps/core-lib-dev/src/app/datepicker.element.ts

@@ -2,8 +2,6 @@ import { LitElement } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { html } from '@sebgroup/green-core/scoping'
 
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
-
 @customElement('datepicker-example')
 export class CalendarExample extends LitElement {
   protected createRenderRoot() {
@@ -12,7 +10,6 @@ export class CalendarExample extends LitElement {
 
   connectedCallback() {
     super.connectedCallback()
-    registerTransitionalStyles()
   }
 
   @state()

apps/core-lib-dev/src/app/simple-values.element.ts

@@ -6,8 +6,6 @@ import {
   getScopedTagName,
 } from '@sebgroup/green-core'
 
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles'
-
 const html = htmlTemplateTagFactory((strs, ...values) =>
   strs.map((s, i) => s + values[i]).join(''),
 )
@@ -16,8 +14,6 @@ export class SimpleValues extends HTMLElement {
   public static observedAttributes = []
 
   connectedCallback() {
-    registerTransitionalStyles()
-
     this.innerHTML = html`
       <form id="my-form">
         <gds-form-validator></gds-form-validator>

apps/core-lib-dev/src/index.html

@@ -2,11 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>StemsLibDev</title>
+    <title>Green Design System</title>
     <base href="/" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
     <sebgroup-root></sebgroup-root>

apps/docs/content/component/button/code.mdx

@@ -12,9 +12,7 @@ date: 2023-12-22
 
 The defaut button har the prio primary and is the variant normal.
 
-<Pattern height="250">
-  <gds-button>Send payment</gds-button>
-</Pattern>
+<Story component='button' id="basic" />
 
 ```html
 <gds-button>Send payment</gds-button>
@@ -24,13 +22,16 @@ The defaut button har the prio primary and is the variant normal.
 
 Buttons exist in three different prios, Primary, Secondary and Tertiary
 
-<Pattern height="250">
+<Story component='button' id="ranks-and-variants" />
+{/* <Story height="400" src='https://storybook.seb.io/latest/core/iframe.html?viewMode=story&id=components-button--ranks-and-variants' /> */}
+
+{/* <Pattern height="250">
   <Grid columns="3" contentInline="auto" justify="center">
     <gds-button variant="primary">Send payment</gds-button>
     <gds-button variant="secondary">Cancel</gds-button>
     <gds-button variant="tertiary">More</gds-button>
   </Grid>
-</Pattern>
+</Pattern> */}
 
 ```html
 <gds-button prio="primary">Send payment</gds-button>

apps/docs/design/blocks/mdx/index.tsx

@@ -13,6 +13,7 @@ import FigmaProto from './figma/figmaProto'
 import IMG from './image/image'
 import SE from './lang/se'
 import Row from './row/row'
+import Story from './story/story'
 
 const components = {
   Figma,
@@ -26,6 +27,7 @@ const components = {
   Pattern,
   Spacer,
   Grid,
+  Story,
 }
 
 export function Mdx({

apps/docs/design/blocks/mdx/story/story.css

@@ -0,0 +1,8 @@
+iframe.story {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border: 1px solid #eaeaea;
+  border-radius: 4px;
+  min-height: 400px;
+}