Align card button right

.bitmap

@@ -19,7 +19,7 @@
     "card": {
         "name": "card",
         "scope": "bit-examples.github-ci",
-        "version": "0.0.4",
+        "version": "aeb07996faa7d9df99c9f509949e8eff53732dee",
         "mainFile": "index.ts",
         "rootDir": "github-ci/card"
     },

.github/workflows/bit-init.yml

@@ -8,7 +8,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
       GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
-      BIT_CLOUD_ACCESS_TOKEN: ${{ secrets.BIT_CLOUD_ACCESS_TOKEN }}
+      BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_CONFIG_ACCESS_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -18,4 +18,4 @@ jobs:
         run: |
           npm config set '@bit:registry' https://node-registry.bit.cloud
           npm config set '@teambit:registry' https://node-registry.bit.cloud
-          npm config set //node-registry.bit.cloud/:_authToken ${{ env.BIT_CLOUD_ACCESS_TOKEN }}
+          npm config set //node-registry.bit.cloud/:_authToken ${{ env.BIT_CONFIG_ACCESS_TOKEN }}

.github/workflows/commit-bitmap.yml

@@ -10,7 +10,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
       GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
-      BIT_CLOUD_ACCESS_TOKEN: ${{ secrets.BIT_CLOUD_ACCESS_TOKEN }}
+      BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_CONFIG_ACCESS_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/lane-cleanup.yml

@@ -10,11 +10,11 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
       GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
-      BIT_CLOUD_ACCESS_TOKEN: ${{ secrets.BIT_CLOUD_ACCESS_TOKEN }}
+      BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_CONFIG_ACCESS_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Initialize Bit
-        uses: bit-tasks/init@v1 
+        uses: bit-tasks/init@v1
       - name: Bit Lane Cleanup
         uses: bit-tasks/lane-cleanup@v1

.github/workflows/pull-request.yml

@@ -13,11 +13,11 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
       GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
-      BIT_CLOUD_ACCESS_TOKEN: ${{ secrets.BIT_CLOUD_ACCESS_TOKEN }}
+      BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_CONFIG_ACCESS_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Initialize Bit
-        uses: bit-tasks/init@v1 
+        uses: bit-tasks/init@v1
       - name: Bit Pull Request
         uses: bit-tasks/pull-request@v1

.github/workflows/verify.yml

@@ -8,7 +8,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GIT_USER_NAME: ${{ secrets.GIT_USER_NAME }}
       GIT_USER_EMAIL: ${{ secrets.GIT_USER_EMAIL }}
-      BIT_CLOUD_ACCESS_TOKEN: ${{ secrets.BIT_CLOUD_ACCESS_TOKEN }}
+      BIT_CONFIG_ACCESS_TOKEN: ${{ secrets.BIT_CONFIG_ACCESS_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

github-ci/card/card.composition.tsx

@@ -4,7 +4,7 @@ import { Card } from './card';
 export const BasicCard = () => {
   return (
     <div style={{ margin: '2em' }}>
-      <Card>hello world!</Card>
+      <Card>This is a card</Card>
     </div>
   );
 };

github-ci/card/card.module.css

@@ -20,9 +20,7 @@
 
 .card .footer {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 16px;
+  padding: 8px;
 }
 
 .card.sm {
@@ -39,3 +37,15 @@
   height: 400px;
   width: 400px;
 }
+
+.card .footerSlot {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.card .buttonSlot {
+  display: flex;
+  justify-content: end;
+}

github-ci/card/card.spec.tsx

@@ -4,6 +4,6 @@ import { BasicCard } from './card.composition';
 
 it('renders with the correct text', () => {
   const { getByText } = render(<BasicCard />);
-  const rendered = getByText('hello world!');
+  const rendered = getByText('This is a card');
   expect(rendered).toBeTruthy();
 });

github-ci/card/card.tsx

@@ -12,7 +12,10 @@ export function Card({ children, footerButton, size = 'md' }: CardProps) {
   return (
     <div className={cardClasses.join(' ')}>
       <div className={styles.container}>{children}</div>
-      <footer className={styles.footer}>{footerButton}</footer>
+      <footer className={styles.footer}>
+        <div className={styles.footerSlot} />
+        <div className={styles.buttonSlot}>{footerButton}</div>
+      </footer>
     </div>
   );
 }